<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css" integrity="sha256-mUZM63G8m73Mcidfrv5E+Y61y7a12O5mW4ezU3bxqW4=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"tallgy.gitee.io","root":"/","images":"/images","scheme":"Muse","darkmode":false,"version":"8.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":false,"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"}}</script><script src="/js/config.js"></script>
<meta name="description" content="外边距合并问题首先，什么是外边距合并123https:&#x2F;&#x2F;www.w3school.com.cn&#x2F;css&#x2F;css_margin_collapse.asphttps:&#x2F;&#x2F;developer.mozilla.org&#x2F;zh-CN&#x2F;docs&#x2F;Web&#x2F;CSS&#x2F;CSS_Box_Model&#x2F;Mastering_margin_collapsinghttps:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;CSS2&#x2F;box.htm">
<meta property="og:type" content="article">
<meta property="og:title" content="外边距合并">
<meta property="og:url" content="http://tallgy.gitee.io/2021/10/20/CSS/%E5%A4%96%E8%BE%B9%E8%B7%9D%E5%90%88%E5%B9%B6/index.html">
<meta property="og:site_name" content="tallgy&#39;s blog">
<meta property="og:description" content="外边距合并问题首先，什么是外边距合并123https:&#x2F;&#x2F;www.w3school.com.cn&#x2F;css&#x2F;css_margin_collapse.asphttps:&#x2F;&#x2F;developer.mozilla.org&#x2F;zh-CN&#x2F;docs&#x2F;Web&#x2F;CSS&#x2F;CSS_Box_Model&#x2F;Mastering_margin_collapsinghttps:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;CSS2&#x2F;box.htm">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://tallgy.gitee.io/.io//image-20211020224217218.png">
<meta property="og:image" content="http://tallgy.gitee.io/.io//image-20211020224237425.png">
<meta property="og:image" content="http://tallgy.gitee.io/.io//image-20211021103824947.png">
<meta property="article:published_time" content="2021-10-20T14:32:22.000Z">
<meta property="article:modified_time" content="2023-06-25T08:57:29.338Z">
<meta property="article:author" content="tallgy">
<meta property="article:tag" content="CSS">
<meta property="article:tag" content="外边距合并">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://tallgy.gitee.io/.io//image-20211020224217218.png">


<link rel="canonical" href="http://tallgy.gitee.io/2021/10/20/CSS/%E5%A4%96%E8%BE%B9%E8%B7%9D%E5%90%88%E5%B9%B6/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"http://tallgy.gitee.io/2021/10/20/CSS/%E5%A4%96%E8%BE%B9%E8%B7%9D%E5%90%88%E5%B9%B6/","path":"2021/10/20/CSS/外边距合并/","title":"外边距合并"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>外边距合并 | tallgy's blog</title>
  




  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">tallgy's blog</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>







</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%A4%96%E8%BE%B9%E8%B7%9D%E5%90%88%E5%B9%B6%E9%97%AE%E9%A2%98"><span class="nav-number">1.</span> <span class="nav-text">外边距合并问题</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%A6%96%E5%85%88%EF%BC%8C%E4%BB%80%E4%B9%88%E6%98%AF%E5%A4%96%E8%BE%B9%E8%B7%9D%E5%90%88%E5%B9%B6"><span class="nav-number">1.1.</span> <span class="nav-text">首先，什么是外边距合并</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9C%89%E5%87%A0%E7%A7%8D%E6%83%85%E5%86%B5%E4%BC%9A%E4%BA%A7%E7%94%9F%E5%A4%96%E8%BE%B9%E8%B7%9D%E5%90%88%E5%B9%B6"><span class="nav-number">1.2.</span> <span class="nav-text">有几种情况会产生外边距合并</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%90%8C%E4%B8%80%E5%B1%82%E7%9B%B8%E9%82%BB%E5%85%83%E7%B4%A0%E4%B9%8B%E9%97%B4"><span class="nav-number">1.2.1.</span> <span class="nav-text">同一层相邻元素之间</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%B2%A1%E6%9C%89%E5%86%85%E5%AE%B9%E5%B0%86%E7%88%B6%E5%85%83%E7%B4%A0%E5%92%8C%E5%90%8E%E4%BB%A3%E5%85%83%E7%B4%A0%E5%88%86%E5%BC%80"><span class="nav-number">1.2.2.</span> <span class="nav-text">没有内容将父元素和后代元素分开</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%A9%BA%E7%9A%84%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0"><span class="nav-number">1.2.3.</span> <span class="nav-text">空的块级元素</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%B3%A8%E6%84%8F%EF%BC%9A"><span class="nav-number">1.2.4.</span> <span class="nav-text">注意：</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3%E5%A4%96%E8%BE%B9%E8%B7%9D%E5%90%88%E5%B9%B6%E7%9A%84%E5%8A%9E%E6%B3%95"><span class="nav-number">1.3.</span> <span class="nav-text">解决外边距合并的办法</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3%E5%85%84%E5%BC%9F%E5%85%83%E7%B4%A0%E7%9A%84%E4%B8%8A%E4%B8%8B%E5%A4%96%E8%BE%B9%E8%B7%9D%E5%90%88%E5%B9%B6"><span class="nav-number">1.3.1.</span> <span class="nav-text">解决兄弟元素的上下外边距合并</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%B5%AE%E5%8A%A8"><span class="nav-number">1.3.1.1.</span> <span class="nav-text">浮动</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A1%8C%E5%86%85%E5%9D%97"><span class="nav-number">1.3.2.</span> <span class="nav-text">行内块</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D"><span class="nav-number">1.3.3.</span> <span class="nav-text">使用绝对定位</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AF%B9%E4%BA%8E%E7%88%B6%E5%AD%90%E5%85%83%E7%B4%A0%E7%9A%84%E5%A4%96%E8%BE%B9%E8%B7%9D%E5%90%88%E5%B9%B6"><span class="nav-number">1.3.4.</span> <span class="nav-text">对于父子元素的外边距合并</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%AE%BE%E7%BD%AE%E8%BE%B9%E6%A1%86%E6%88%96%E5%86%85%E8%BE%B9%E8%B7%9D"><span class="nav-number">1.3.4.1.</span> <span class="nav-text">设置边框或内边距</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%AE%BE%E7%BD%AE%E6%B5%AE%E5%8A%A8%EF%BC%8C%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%EF%BC%8C%E8%A1%8C%E5%86%85%E5%9D%97%E5%B8%83%E5%B1%80%EF%BC%8C%E5%92%8Coverflow"><span class="nav-number">1.3.4.2.</span> <span class="nav-text">设置浮动，绝对定位，行内块布局，和overflow</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AF%B9%E4%BA%8E%E7%A9%BA%E7%9A%84%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0"><span class="nav-number">1.3.5.</span> <span class="nav-text">对于空的块级元素</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%AE%BE%E7%BD%AE%E8%BE%B9%E6%A1%86%EF%BC%8C%E8%BE%B9%E8%B7%9D%EF%BC%8C%E9%AB%98%E5%BA%A6"><span class="nav-number">1.3.5.1.</span> <span class="nav-text">设置边框，边距，高度</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%9D%97%E7%8E%AF%E5%A2%83%E4%B8%8A%E4%B8%8B%E6%96%87"><span class="nav-number">1.3.5.2.</span> <span class="nav-text">块环境上下文</span></a></li></ol></li></ol></li></ol></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">tallgy</p>
  <div class="site-description" itemprop="description">只是一个知识的搬运工</div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">107</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">32</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">74</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2021/10/20/CSS/%E5%A4%96%E8%BE%B9%E8%B7%9D%E5%90%88%E5%B9%B6/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          外边距合并
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-10-20 22:32:22" itemprop="dateCreated datePublished" datetime="2021-10-20T22:32:22+08:00">2021-10-20</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/CSS/" itemprop="url" rel="index"><span itemprop="name">CSS</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <h1 id="外边距合并问题"><a href="#外边距合并问题" class="headerlink" title="外边距合并问题"></a>外边距合并问题</h1><h2 id="首先，什么是外边距合并"><a href="#首先，什么是外边距合并" class="headerlink" title="首先，什么是外边距合并"></a>首先，什么是外边距合并</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">https://www.w3school.com.cn/css/css_margin_collapse.asp</span><br><span class="line">https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing</span><br><span class="line">https://www.w3.org/TR/CSS2/box.html#collapsing-margins</span><br></pre></td></tr></table></figure>



<p><strong>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。</strong></p>
<p><strong>合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</strong></p>
<p>简单来说，这个的效果就是，两个外边距并不是进行的相加的边距，而是取了其中的最大值</p>
<p>一个简单的例子</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=&quot;UTF-8&quot;&gt;</span><br><span class="line">  &lt;title&gt;Title&lt;/title&gt;</span><br><span class="line">  &lt;style&gt;</span><br><span class="line">    * &#123;</span><br><span class="line">      margin: 0;</span><br><span class="line">      padding: 0;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .f &#123;</span><br><span class="line">      height: 400px;</span><br><span class="line">      width: 800px;</span><br><span class="line">      background-color: red;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .c &#123;</span><br><span class="line">      height: 50%;</span><br><span class="line">      width: 50%;</span><br><span class="line">      background-color: blue;</span><br><span class="line">      margin-top: 25%;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">  &lt;/style&gt;</span><br><span class="line"></span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;div class=&quot;f&quot;&gt;</span><br><span class="line">  &lt;div class=&quot;c&quot;&gt;&lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>

<p>实际的效果</p>
<img src="/.io//image-20211020224217218.png" alt="image-20211020224217218" style="zoom:50%;">

<p>预想的效果</p>
<img src="/.io//image-20211020224237425.png" alt="image-20211020224237425" style="zoom:50%;">



<h2 id="有几种情况会产生外边距合并"><a href="#有几种情况会产生外边距合并" class="headerlink" title="有几种情况会产生外边距合并"></a>有几种情况会产生外边距合并</h2><h3 id="同一层相邻元素之间"><a href="#同一层相邻元素之间" class="headerlink" title="同一层相邻元素之间"></a><strong>同一层相邻元素之间</strong></h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">相邻的两个元素之间的外边距重叠，除非后一个元素加上clear-fix清除浮动。</span><br></pre></td></tr></table></figure>

<p>​    相邻元素， 元素包含了，<code>块级元素</code>，<code>行内元素</code>，<code>行内块元素</code></p>
<p>但是对于 <code>行内元素</code>来说，不能使用margin-top，来进行扩张。</p>
<p>对于 <code>行内块元素</code>  来说，因为他造成了 BFC，所以，margin-top，没有了合并的效果。</p>
<p>所以，最后还是使用了块级元素。</p>
<h3 id="没有内容将父元素和后代元素分开"><a href="#没有内容将父元素和后代元素分开" class="headerlink" title="没有内容将父元素和后代元素分开"></a><strong>没有内容将父元素和后代元素分开</strong></h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">原话：</span><br><span class="line">	如果没有边框border，内边距padding，行内内容，也没有创建块级格式上下文或清除浮动来分开一个块级元素的上边界margin-top 与其内一个或多个后代块级元素的上边界margin-top；或没有边框，内边距，行内内容，高度height，最小高度min-height或 最大高度max-height 来分开一个块级元素的下边界margin-bottom与其内的一个或多个后代后代块元素的下边界margin-bottom，则就会出现父块元素和其内后代块元素外边界重叠，重叠部分最终会溢出到父级块元素外面。</span><br></pre></td></tr></table></figure>

<p>这里的内容，包括了</p>
<p><strong>第一部分：</strong></p>
<p>​    <strong>边框：</strong>border    父元素使用，子元素使用并不会有效果。</p>
<p>​    同理，<strong>内边距：</strong>padding，也是一样的。</p>
<p>​    <strong>创建块级格式上下文：</strong>（BFC）我们后面再说：</p>
<p>​    现在我就直接贴上　MDN　的 url</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context</span><br></pre></td></tr></table></figure>

<p>​    <strong>清除浮动：</strong>不知道是要进行什么操作的意思。不知道是不是对子元素进行一次浮动，然后再在父元素上进行清除浮动。</p>
<p><strong>第二部分：</strong></p>
<p>​    父元素没有定义高度，所以最终高度会由子元素进行定义，因此，对于 <code>margin-bottom</code> 下边界会造成合并的效果。，然后重叠部分会溢出到父元素的外面。</p>
<h3 id="空的块级元素"><a href="#空的块级元素" class="headerlink" title="空的块级元素"></a><strong>空的块级元素</strong></h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">当一个块元素上边界margin-top 直接贴到元素下边界margin-bottom时也会发生边界折叠。这种情况会发生在一个块元素完全没有设定边框border、内边距padding、高度height、最小高度min-height 、最大高度max-height 、内容设定为inline或是加上clear-fix的时候。</span><br></pre></td></tr></table></figure>

<p>简单来说，就是一个空的块级元素</p>
<p>然后对其进行 上边距和下边距的 设置，最终的结果不会是两个相加，</p>
<p>而是选择最大的。</p>
<p>前提就是父元素不能设置</p>
<p>​    border，padding，height，min-height， max-height， display：inline， 和 加上 clear-fix。</p>
<p>对于最后一个clear-fix，有点没有理解清除，其他的还好， display：inline，就是设置成一个行内元素，因为是行内元素，所以外边距就没有效果了。其他的 border，padding，就是一些正常的解决合并问题的方法。</p>
<p>对于空的块级元素，连续相邻的外边距也是会合并的。</p>
<img src="/.io//image-20211021103824947.png" alt="image-20211021103824947" style="zoom:50%;">



<h3 id="注意："><a href="#注意：" class="headerlink" title="注意："></a>注意：</h3><ul>
<li>一些情况的组合会产生更多复杂的外边距离收起。</li>
<li>即使某些外边距为0，这些规则仍然适用。因此，父母元素的外边距是0，或最后一个外边距可能会“接触到第一个元素”到父母元素的外面。</li>
<li>如果参与折叠的外边距中包含的负值，折叠后的外边距的值为最大的正边距和最大的负边距（即绝对值的最大负边距）和；如果有—— 13px 8px 100px 一叠，远景的技术就是100px -13px的87px。（有负有正，取最大最小相加）</li>
<li>如果所有参与的户外边距都为负，折叠后的外边距的最大负边距值为多少。这个规则适用于户外元素和元素。 （全为负，取绝对值最大的。）</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">个人认为：</span><br><span class="line">	这样正负的判断，在修改边距的时候，有一个逐渐的过程，而不会出现突变情况。</span><br></pre></td></tr></table></figure>



<h2 id="解决外边距合并的办法"><a href="#解决外边距合并的办法" class="headerlink" title="解决外边距合并的办法"></a>解决外边距合并的办法</h2><p>首先一点：</p>
<p>​    <strong>只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。</strong></p>
<p>行内块不会合并的原因是，他形成了BFC，块格式化上下文。</p>
<p>其他两个是因为他们脱离了普通文档流。</p>
<h3 id="解决兄弟元素的上下外边距合并"><a href="#解决兄弟元素的上下外边距合并" class="headerlink" title="解决兄弟元素的上下外边距合并"></a>解决兄弟元素的上下外边距合并</h3><h4 id="浮动"><a href="#浮动" class="headerlink" title="浮动"></a>浮动</h4><p>虽然浮动可以解决，但是因为是兄弟元素的外边距合并，有时会产生更多的问题。</p>
<h3 id="行内块"><a href="#行内块" class="headerlink" title="行内块"></a>行内块</h3><p>行内块 display: inline-block;    感觉比上面的好处多了很多。</p>
<h3 id="使用绝对定位"><a href="#使用绝对定位" class="headerlink" title="使用绝对定位"></a>使用绝对定位</h3><p>​        在这里我知道了一个小知识点，一般对绝对定位的时候都会直接加上 left，top，如果不加的话，那么就会相对于原来的位置不变。虽然也脱离了文档流，不占据的位置，但是从视觉上来说，他是解决了外边框合并的问题。</p>
<p>​    但是如果父元素没有给定高度的话，那么将不会把这个高度计算在内。</p>
<h3 id="对于父子元素的外边距合并"><a href="#对于父子元素的外边距合并" class="headerlink" title="对于父子元素的外边距合并"></a>对于父子元素的外边距合并</h3><h4 id="设置边框或内边距"><a href="#设置边框或内边距" class="headerlink" title="设置边框或内边距"></a>设置边框或内边距</h4><p>避免父子的外边距相邻</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">给父元素加上 border: 1px solid transparent;</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">padding: 1px;</span><br></pre></td></tr></table></figure>



<h4 id="设置浮动，绝对定位，行内块布局，和overflow"><a href="#设置浮动，绝对定位，行内块布局，和overflow" class="headerlink" title="设置浮动，绝对定位，行内块布局，和overflow"></a>设置浮动，绝对定位，行内块布局，和overflow</h4><p>这种的实现就是进行 BFC 块级格式化。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">float: left;</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">position: absolute;</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">display: inline-block;</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">overflow: hidden;</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">overflow: auto;</span><br></pre></td></tr></table></figure>



<h3 id="对于空的块级元素"><a href="#对于空的块级元素" class="headerlink" title="对于空的块级元素"></a>对于空的块级元素</h3><h4 id="设置边框，边距，高度"><a href="#设置边框，边距，高度" class="headerlink" title="设置边框，边距，高度"></a>设置边框，边距，高度</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">border: 1px solid transparent;</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">padding: 1px;</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">height: 1px;</span><br></pre></td></tr></table></figure>

<h4 id="块环境上下文"><a href="#块环境上下文" class="headerlink" title="块环境上下文"></a>块环境上下文</h4><p>比如 </p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">display: inline-block;</span><br><span class="line">overflow: hidden;</span><br></pre></td></tr></table></figure>


    </div>

    
    
    

    <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/CSS/" rel="tag"># CSS</a>
              <a href="/tags/%E5%A4%96%E8%BE%B9%E8%B7%9D%E5%90%88%E5%B9%B6/" rel="tag"># 外边距合并</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/2021/10/20/JavaScript/%E6%96%B9%E6%B3%95/eval%E5%87%BD%E6%95%B0/" rel="prev" title="eval函数">
                  <i class="fa fa-chevron-left"></i> eval函数
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/2021/10/21/HTML/%E5%9D%97%E7%8E%AF%E5%A2%83%E4%B8%8A%E4%B8%8B%E6%96%87/" rel="next" title="块环境上下文(BFC)">
                  块环境上下文(BFC) <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2023</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">tallgy</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/muse/" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>

    </div>
  </footer>

  
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/schemes/muse.js"></script><script src="/js/next-boot.js"></script>

  





  





</body>
</html>
